<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-08-14 16:17:31
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-09-18 14:14:28
 * @FilePath: \face-ordering-data-screen\src\components\HomeOne.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content-box" ref="homeRef" :style="'transform:scale(' +
        scaleValue +
        ') translate(-50%,-50%)  translateZ(0)  translate3d(0,0,0)'
        ">
    <!-- 加载层 -->
    <div class="loading-flex-box" v-show="loading">
      <dv-loading>加载中...</dv-loading>
    </div>
    <!-- 头部 -->
    <Header ref="header"></Header>
    <!-- 中间内容部分 -->
    <div class="screenBox">
      <div class="lfBox" :style="'height:' + lfBoxHeight + 'px;'">
        <div class="lfContent" ref="lfBoxRef">
          <div class="title">
            <el-image :src="require('../assets/img/tiaowen.png')"></el-image>
            <span>取餐预警等级</span>
          </div>
          <div class="warnBox">
            <div class="infoFlex">
              <div class="level">
                <span>当前等级：</span>
                <span style="color: #1EDCEC;">{{ baseInfo.base.level.level_str }}</span>
              </div>
              <div class="type">
                <div class="one">
                  <span style="background: #1EDCEC;"></span>
                  <span>一般</span>
                </div>
                <div class="two">
                  <span style="background: #FAC540;"></span>
                  <span>严重</span>
                </div>
                <div class="three">
                  <span style="background: #FA5662;"></span>
                  <span>严重</span>
                </div>
              </div>
            </div>
            <div class="lineFlex">
              <div class="arrow" :style="'left:' + Number(baseInfo.base.level.rate) + '%;'"
                :class="Number(baseInfo.base.level.rate) <= 33.333 ? 'colorBar1' : Number(baseInfo.base.level.rate) <= 66.666 ? 'colorBar2' : 'colorBar3'">
              </div>
              <div class="line line1"></div>
              <div class="line line2"></div>
            </div>
          </div>
          <div class="deviceBox" v-if="DeviceComsum2.length > 0">
            <div class="nameBox">
              {{ DeviceComsum2[0].agency_name }}{{ DeviceComsum2[0].device_name }}
            </div>
            <!-- 轮播 -->
            <div class="deviceList">
              <div ref="con2" :class="{ anim: animate2 == true }" @mouseenter="Stop2()" @mouseleave="Up2()">
                <div class="swiper-slide" :style="'margin-right: ' + (Distance * 2) + 'px;'"
                  v-for="(itemk, indexk) in DeviceComsum2" :key="indexk" ref="rowItem2">
                  <div class="items">
                    <div class="conteny">
                      <img src="../assets/img/cpu.png" alt="">
                      <div class="info">
                        <div>CPU</div>
                        <div>{{ itemk.sys_info ? itemk.sys_info.cpu : 0 }}%</div>
                      </div>
                    </div>
                  </div>
                  <div class="items">
                    <div class="conteny">
                      <img src="../assets/img/id.png" alt="">
                      <div class="info">
                        <div>读卡器</div>
                        <div style="color: #FC9A19;">{{ itemk.sys_info ? itemk.sys_info.id_card : 0 }}%</div>
                      </div>
                    </div>
                  </div>
                  <div class="items">
                    <div class="conteny">
                      <img src="../assets/img/neicun.png" alt="">
                      <div class="info">
                        <div>内存</div>
                        <div style="color: #FA5662;">{{ itemk.sys_info ? itemk.sys_info.memory : 0 }}%</div>
                      </div>
                    </div>
                  </div>
                  <div class="items">
                    <div class="conteny">
                      <img src="../assets/img/renlian.png" alt="">
                      <div class="info">
                        <div>人脸模组</div>
                        <div>{{ itemk.sys_info ? itemk.sys_info.face_count : 0 }}%</div>
                      </div>
                    </div>
                  </div>
                  <div class="items">
                    <div class="conteny">
                      <img src="../assets/img/cipan.png" alt="">
                      <div class="info">
                        <div>磁盘</div>
                        <div>{{ itemk.sys_info ? itemk.sys_info.disk : 0 }}%</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="title">
            <el-image :src="require('../assets/img/tiaowen.png')"></el-image>
            <span>今日用餐刷脸/刷卡峰值</span>
          </div>
        </div>
        <div class="brushFace">
          <div id="chartFaceBar" :style="'height:' + lfLineHeight + 'px;'">
          </div>
          <div class="typeList">
            <div>
              <span></span>
              <span>刷脸</span>
            </div>
            <div>
              <span style="background-color: #F99951;"></span>
              <span>刷卡</span>
            </div>
            <!-- <div>
              <span style="background-color: #FA5963;"></span>
              <span>其他</span>
            </div> -->
          </div>
        </div>
      </div>
      <div class="ctBox">
        <div class="sdfsd" ref="ctBoxRef">
          <div class="statyBox">
            <div class="left">
              <div id="mainBottomLeft"></div>
            </div>
            <div class="right">
              <!-- <div class="items">
                <div>
                  <span>今日订单总金额</span>
                  <span style="color:#66FFFF">¥{{ baseInfo.meal.total[0].amount }}</span>
                </div>
                <div>
                  <span style="color:#66FFFF">预订数量</span>
                  <span>{{ baseInfo.meal.total[0].count }}</span>
                </div>
              </div> -->
              <div class="items">
                <div>
                  <span>预订餐总金额</span>
                  <span style="color:#66FFFF">¥{{ baseInfo.bill.total.preordain_amount }}</span>
                </div>
                <div>
                  <span>预订数量</span>
                  <span style="color:#66FFFF">{{ baseInfo.bill.total.preordain_count }}</span>
                </div>
              </div>
              <div class="items">
                <div>
                  <span>自由点餐总金额</span>
                  <span style="color: #FFB30A;">¥{{ baseInfo.bill.total.general_amount }}</span>
                </div>
                <div>
                  <span>点餐数量</span>
                  <span style="color: #FFB30A;">{{ baseInfo.bill.total.general_count }}</span>
                </div>
              </div>
              <div class="items">
                <div>
                  <span>退单总金额</span>
                  <span style="color: #FF5658;">¥{{ baseInfo.bill.total.refund_amount }}</span>
                </div>
                <div>
                  <span>退单数量</span>
                  <span style="color: #FF5658;">{{ baseInfo.bill.total.refund_count }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="totolBox">
            <div class="items">
              <div class="typeName">今日订单</div>
              <div class="money">{{ baseInfo.meal.total[0].amount.replace(',', '') }}</div>
              <div class="uniy">元</div>
              <div class="num">{{ baseInfo.meal.total[0].count }} 单</div>
            </div>
            <div class="items">
              <div class="typeName">今日早餐</div>
              <div class="money">{{ baseInfo.meal.total[1].amount.replace(',', '') }}</div>
              <div class="uniy">元</div>
              <div class="num">{{ baseInfo.meal.total[1].count }} 单</div>
            </div>
            <div class="items">
              <div class="typeName">今日午餐</div>
              <div class="money">{{ baseInfo.meal.total[2].amount.replace(',', '') }}</div>
              <div class="uniy">元</div>
              <div class="num">{{ baseInfo.meal.total[2].count }} 单</div>
            </div>
            <div class="items">
              <div class="typeName">今日晚餐</div>
              <div class="money">{{ baseInfo.meal.total[3].amount.replace(',', '') }}</div>
              <div class="uniy">元</div>
              <div class="num">{{ baseInfo.meal.total[3].count }} 单</div>
            </div>
            <div class="items">
              <div class="typeName">今日宵夜</div>
              <div class="money">{{ baseInfo.meal.total[4].amount.replace(',', '') }}</div>
              <div class="uniy">元</div>
              <div class="num">{{ baseInfo.meal.total[4].count }} 单</div>
            </div>
            <!-- <div class="items">
              <div class="typeName">其他消费订单总额</div>
              <div class="money">{{ baseInfo.meal.total[5].amount }}</div>
              <div class="uniy">元</div>
              <div class="num">{{ baseInfo.meal.total[5].count }} 单</div>
            </div> -->
          </div>
        </div>
        <!-- 柱状图 -->
        <div class="chartBox" :style="'height:' + BarHeight + 'px;'">
          <div class="headerBox" ref="headerBox">
            <el-image :src="require('../assets/img/tiaowen.png')"></el-image>
            <span>今日取餐数据统计</span>
            <el-image :src="require('../assets/img/tiaowen.png')"></el-image>
          </div>
          <div class="contentBox">
            <div class="leftBar">
              <div class="typebox">
                <span></span>
                <span>初中部</span>
              </div>
              <div id="barOne" :style="'width:100%;height:' + contentHeight + 'px;'"></div>
            </div>
            <div class="rightBar">
              <div class="typebox">
                <span></span>
                <span>高中部</span>
              </div>
              <div id="barTwo" :style="'width:100%;height:' + contentHeight + 'px;'"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="rtBox" :style="'height:' + rtBoxHeight + 'px;'">
        <div class="rtContent" ref="rtBoxRef">
          <div class="title">
            <el-image :src="require('../assets/img/tiaowen.png')"></el-image>
            <span>今日用餐率统计</span>
          </div>
          <!-- 版本一 -->
          <!-- <div class="listBox">
            <div class="item" v-for="(item, index) in baseInfo.meal.facultyMeal" :key="index">
              <div class="gradeName">{{ item.faculty_name }}统计</div>
              <div class="rateBox" v-for="(items, indexs) in item.rate" :key="indexs">
                <div>{{ items.meal_name }}</div>
                <div>{{ items.rate }}%</div>
              </div>
            </div>
          </div> -->
          <!-- 版本二 -->
          <div class="mealList">
            <div class="titles">学部年级统计</div>
            <div class="items" v-for="(itemn, indexn) in baseInfo.meal.gradeMeal" :key="indexn">
              <div class="mealGrade">{{ itemn.faculty_name }}</div>
              <div class="mealright">
                <div class="columntitle">
                  <div>年级</div>
                  <div>早餐</div>
                  <div>午餐</div>
                  <div>晚餐</div>
                  <div>宵夜</div>
                </div>
                <div class="detailItemd" :style="indexn == 0 ? 'color: #66FFFF;' : 'color: #FC9A19;'"
                  v-for="(iteml, indexl) in itemn.grade" :key="indexl">
                  <div>{{ iteml.grade_name.substr(0, 4) }}</div>
                  <div v-for="k in iteml.meal_type" :key="k.meal_key">{{ parseInt(k.rate) }}%</div>
                </div>
              </div>
            </div>
          </div>
          <div class="title">
            <el-image :src="require('../assets/img/tiaowen.png')"></el-image>
            <span>今日消费设备消费笔数统计</span>
          </div>
        </div>
        <!-- 排名轮播表 -->
        <div class="dv-scroll-board" :style="'width:100%;height:' + rtLineHeight + 'px;overflow: hidden;'">
          <div class="rowBox" ref="con1" :class="{ anim: animate == true }" @mouseenter="Stop()" @mouseleave="Up()">
            <div class="row-item" v-for="(item, index) in  DeviceComsum " :key="index" style="'width:100%;" ref="rowItem">
              <div class="ranking-info">
                <div class="info-name">{{ item.agency_name }}{{ item.device_name }}</div>
                <div class="ranking-value"> {{ item.today_count }}笔</div>
              </div>
              <div class="ranking-column" :class="item.color">
                <div class="inside-column" :style="'width:' + ((item.today_count * 100) / max2) + '%;'">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer ref="footer"></Footer>
  </div>
</template>
<script>
import 'swiper/css/swiper.css' // 引入swiper样式
export default {
  data() {
    return {
      scaleValue:'',
      loading: false,
      rowNum: 7,
      max: 0,
      max2: 0,
      // 设备消费
      animate: false,
      animate2: false,
      intNum: null,
      intNum2: null,
      timersetVal: null, // 定时器
      DeviceComsum: [],
      DeviceComsum2: [
        {
          agency_name: '',
          device_name: ''
        }
      ],
      echartDataOne: [],
      echartDataTwo: [],
      currentIndex: 0,
      DeviceList: [{}],
      Distance: 10,
      BarHeight: 0,
      contentHeight: 0,
      lfBoxHeight: 0,
      lfLineHeight: 0,
      rtBoxHeight: 0,
      rtLineHeight: 0,
      RingData: [],
      myChart: null,
      myChartBarOne: null,
      myChartBarTwo: null,
      myChartFaceBar: null,
      totalNum: 0,
      baseInfo: {
        base: {
          level: {
            level: 1,
            level_str: '一般',
            rate: '0'
          }
        },
        device: [
          {
            agency_name: '',
            device_name: '',
            sys_info: {
              cpu: '37.64',
              disk: '42.49',
              face_count: '53.30',
              id_card: '60.71',
              memory: '79.38'
            },
            today_count: 0
          }
        ],
        bill: {
          total: {
            amount: '0',
            count: 0,
            refund_amount: '0',
            refund_count: 0
          }
        },
        total: {
          general_amount: 0,
          general_count: 0,
          preordain_amount: 0,
          preordain_count: 0,
          refund_amount: 0,
          refund_count: 0
        },
        meal: {
          facultyMeal: [
            {
              meal_type: []
            },
            {
              meal_type: []
            }
          ],
          gradeMeal: [],
          total: [
            {
              amount: '0',
              count: 0
            },
            {
              amount: '0',
              count: 0
            },
            {
              amount: '0',
              count: 0
            },
            {
              amount: '0',
              count: 0
            },
            {
              amount: '0',
              count: 0
            },
            {
              amount: '0',
              count: 0
            }
          ]
        }
      }
    }
  },
  created() { },
  async mounted() {
    var that = this
    await that.setScale()
    // that.getBarHeight()
    // that.getLineHeight()
    // that.getLevelHeight()
    await that.getDeviceList()
    this.timersetVal = setInterval(() => {
      this.getDeviceList()
    }, 1000 * 5 * 60)
    window.addEventListener('resize', () => {
      setTimeout(async () => {
        await that.setScale()
        await that.getBarHeight()
        await that.getLineHeight()
        await that.getLevelHeight()
        // await that.initSwiper(that.Distance + '')
        await that.myChart.resize()
        await that.myChartBarOne.resize()
        await that.myChartBarTwo.resize()
        await that.myChartFaceBar.resize()
      }, 200)
    })
  },
  computed: {},
  destroyed() {
    // 使用clearInterval清除定时器
    clearInterval(this.intNum2)
    clearInterval(this.intNum)
  },
  methods: {
     async setScale () {
        var vw = window.innerWidth / 1920
        var vh = window.innerHeight / 1080
        var scale = vw < vh ? vw : vh
        this.scaleValue = scale
    },
    // 获取设备列表
    async getDeviceList() {
      if (this.totalNum === 0) {
        this.loading = true
      }
      this.totalNum++
      const params = {
        mode: 'dashboard',
        agency_id: 9
      }
      const { data: res } = await this.$http.get('/Bi/', {
        params: params
      })
      if (res.code !== 1) {
        this.loading = false
        return this.$message.error(res.msg)
      }
      this.baseInfo = res.data
      // 学校信息
      this.$refs.header.SchoolInfo = res.data.base.school
      const scale = document.documentElement.clientWidth / 1920
      this.Distance = 16 * Math.min(scale, 2) / 0.8
      console.log(this.Distance)
      this.DeviceComsum2 = []
      this.baseInfo.device.forEach(k => {
        if (Number(k.today_count) !== 0) {
          this.DeviceComsum2.push(k)
        }
      })
      await clearInterval(this.intNum2)
      setTimeout(() => {
        this.intNum2 = null
        this.currentIndex = 0
        if (this.DeviceComsum2.length > 1) {
          this.intNum2 = setInterval(this.ScrollUp2, 5000)
        }
      }, 600)
      this.$nextTick(async () => {
        await this.getLineHeight()
        await this.getLineList()
      })
      // 中间
      this.echartDataOne = this.baseInfo.meal.facultyMeal[0]
      this.echartDataTwo = this.baseInfo.meal.facultyMeal[1]
      this.RingData = [
        // { value: this.baseInfo.meal.total[0].count, money: this.baseInfo.meal.total[0].amount, name: '今日订单总金额' },
        { value: this.baseInfo.bill.total.preordain_count, money: this.baseInfo.bill.total.preordain_amount, name: '预订餐总金额' },
        { value: this.baseInfo.bill.total.general_count, money: this.baseInfo.bill.total.general_amount, name: '自由点餐总金额' },
        { value: this.baseInfo.bill.total.refund_count, money: this.baseInfo.bill.total.refund_amount, name: '退单总金额' }
      ]
      await this.geRingData()
      // 右边
      // 今日用餐率统计
      await this.getMealData()
      this.DeviceComsum = []
      this.baseInfo.device.forEach(k => {
        if (Number(k.today_count) !== 0) {
          this.DeviceComsum.push(k)
        }
      })
      await this.getMax2()
      await clearInterval(this.intNum)
      setTimeout(() => {
        this.intNum = null
        if (this.DeviceComsum.length > this.rowNum) {
          this.intNum = setInterval(this.ScrollUp, 5000)
        }
      }, 600)
      this.loading = false
    },
    // 向上轮播方法
    ScrollUp() {
      var con1 = this.$refs.con1
      var height = Number((window.getComputedStyle(this.$refs.rowItem[0]).height).replace('px', ''))
      con1.style.marginTop = '-' + height + 'px'
      // con1.style.marginTop = '-' + (height * parseInt(this.rtLineHeight / height)) + 'px'
      // var num = parseInt(this.rtLineHeight / height)
      // console.log(height, '滚动的高度')
      this.animate = !this.animate
      var that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function () {
        // 单条滚动
        that.DeviceComsum.push(that.DeviceComsum[0])
        that.DeviceComsum.shift()
        // 滚动一页
        // for (let i = 0; i < num; i++) {
        //   that.DeviceComsum.push(JSON.parse(JSON.stringify(that.DeviceComsum[i])))
        // }
        // for (let i = 0; i < num; i++) {
        //   that.DeviceComsum.shift()
        // }
        con1.style.marginTop = '0px'
        that.animate = !that.animate // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500)
    },
    // 轮播初始化
    ScrollUp2() {
      var con2 = this.$refs.con2
      var width = Number((window.getComputedStyle(this.$refs.rowItem2[0]).width).replace('px', ''))
      console.log(width)
      con2.style = 'display: flex;transform: translateX(-' + (width + (this.Distance * 2)) + 'px);-webkit-transform: translateX(-' + (width + (this.Distance * 2)) + 'px);-ms-transform: translateX(-' + (width + (this.Distance * 2)) + 'px);-moz-transform: translateX(-' + (width + (this.Distance * 2)) + 'px);'
      if (this.currentIndex === this.DeviceComsum2.length) {
        this.currentIndex = 0
      }
      this.animate2 = !this.animate2
      this.currentIndex = this.currentIndex + 1
      var that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function () {
        // 单条滚动
        that.DeviceComsum2.push(that.DeviceComsum2[0])
        that.DeviceComsum2.shift()
        con2.style = 'display: flex;transform: translateX(0px);-webkit-transform: translateX(0px);-ms-transform: translateX(0px);-moz-transform: translateX(0px)'
        that.animate2 = !that.animate2 // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500)
    },
    // 获取则线图
    async getLineList() {
      this.getBrushFace()
    },
    // 获取环形图
    async geRingData() {
      this.$nextTick(async () => {
        await this.optionBottomLeft()
        await this.getBarHeight()
        await this.getMax(this.echartDataOne.meal_type, this.echartDataTwo.meal_type)
        await this.getBarOne()
        await this.getBarTwo()
      })
    },
    // 今日用餐率统计
    async getMealData() {
      this.$nextTick(async () => {
        await this.getLevelHeight()
      })
    },
    // 鼠标移上去停止
    Stop() {
      clearInterval(this.intNum)
    },
    // 鼠标移开继续
    Up() {
      this.ScrollUp()
    },

    // 鼠标移上去停止
    Stop2() {
      clearInterval(this.intNum2)
    },
    // 鼠标移开继续
    Up2() {
      this.ScrollUp2()
    },
    // 找出数组里面的最大值
    getMax2() {
      var barArry = []
      this.DeviceComsum.forEach((item, index) => {
        item.color = (index % 2) !== 1 ? 'color1' : 'color2'
        barArry.push(Number(item.today_count))
      })
      this.max2 = Math.max.apply(null, barArry)
    },
    // 计算柱状图的高度
    getBarHeight() {
      this.BarHeight = this.$refs.homeRef.clientHeight - this.$refs.ctBoxRef.clientHeight - this.$refs.header.$el.clientHeight - this.$refs.footer.$el.offsetHeight
      this.contentHeight = this.BarHeight - this.$refs.headerBox.clientHeight
    },
    getLineHeight() {
      this.lfBoxHeight = this.$refs.homeRef.clientHeight - this.$refs.header.$el.clientHeight - this.$refs.footer.$el.clientHeight
      this.lfLineHeight = this.lfBoxHeight - this.$refs.lfBoxRef.clientHeight
    },
    getLevelHeight() {
      this.rtBoxHeight = this.$refs.homeRef.clientHeight - this.$refs.header.$el.clientHeight - this.$refs.footer.$el.offsetHeight
      setTimeout(() => {
        const height = Number((window.getComputedStyle(this.$refs.rowItem[0]).height).replace('px', ''))
        this.rowNum = Math.trunc((this.rtBoxHeight - this.$refs.rtBoxRef.clientHeight) * 0.87 / Math.ceil(this.$refs.rowItem[0].clientHeight))
        this.rtLineHeight = this.rowNum * Math.ceil(height)
      }, 50)
    },
    // 计算两个数组之间的最大值
    getMax(data1, data2) {
      var barArry = []
      data1.forEach(item => {
        barArry.push(item.count)
      })
      data2.forEach(item => {
        barArry.push(item.count)
      })
      this.max = Math.max.apply(null, barArry) * 1.2
      console.log(this.max)
    },
    // 让文字根据屏幕自适应
    nowSize(val) {
      var nowClientWidth = document.documentElement.clientWidth
      return val * (nowClientWidth / 1920)
    },
    optionBottomLeft() {
      this.myChart = this.$echarts.init(document.getElementById('mainBottomLeft'))
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#00E0CC', '#FFB30A', '#FF5658'],
        graphic: [{ // 环形图中间添加文字
          type: 'text', // 通过不同top值可以设置上下显示
          left: 'center',
          top: '48%',
          style: {
            text: '总金额',
            textAlign: 'center',
            fill: '#ffffff', // 文字的颜色
            width: 30,
            height: 30,
            fontSize: this.nowSize(20),
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei'
          }
        }],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['47%', '73%'],
            avoidLabelOverlap: false,
            clockWise: false, // 默认逆时针
            label: {
              normal: {
                show: false,
                position: 'center'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.RingData
          }
        ]
      }
      this.myChart.setOption(option, true)
    },
    getBarOne() {
      this.myChartBarOne = this.$echarts.init(document.getElementById('barOne'))
      var colors = [
        {
          one: '#1EDBEC',
          two: '#087EFC'
        }
      ]
      var xAxisData = this.echartDataOne.meal_type.map((v) => v.meal_name)
      var yAxisData = this.echartDataOne.meal_type.map((v) => v.count)
      var clientWidths = document.documentElement.clientWidth
      var option = {
        grid: {
          left: '0',
          right: '0',
          bottom: this.nowSize(50)
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLine: {
            // 轴线
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            }
          },
          axisLabel: {
            color: 'rgba(255,255,255,0.8)',
            fontSize: clientWidths < 1440 ? this.nowSize(12) : clientWidths < 1680 ? this.nowSize(12) : this.nowSize(14),
            interval: 0,
            margin: 15 // 柱状图的x轴上的标签文字距离x轴的距离
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          // name: '单位：次',
          nameTextStyle: {
            color: '#268C8C',
            fontSize: this.nowSize(12),
            padding: [0, 0, 10, -30] // name文字位置 对应 上右下左
          },
          show: false,
          type: 'value',
          max: this.max,
          // y轴线
          axisLine: {
            show: false
          },
          // 轴文字
          axisLabel: {
            color: '#268C8C',
            fontSize: this.nowSize(12)
          },

          // 网格线
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed', // dotted：虚线 solid:实线
              width: 1,
              color: '#268C8C'
            }
          }
        },
        series: [
          {
            name: '初中部',
            type: 'bar', // 设置类型为象形柱状图
            barWidth: '56%', // 柱图宽度
            barMaxWidth: 54, // 每一个都要设置
            barMinWidth: 10, // 每一个都要设置
            itemStyle: {
              normal: {
                color: function (params) {
                  // var odd = params.dataIndex % 2
                  return {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: colors[0].one // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: colors[0].two // 100% 处的颜色
                      }
                    ]
                  }
                },

                // color:'#39C9F6',
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (params) {
                    // 设置柱状图上文本的颜色不同
                    // 索引
                    if (params.dataIndex % 2 === 0) {
                      return `{a|${yAxisData[params.dataIndex]}}笔`
                    } else {
                      return `{b|${yAxisData[params.dataIndex]}}笔`
                    }
                  },
                  rich: {
                    a: {
                      fontSize: clientWidths < 1440 ? this.nowSize(14) : clientWidths < 1680 ? this.nowSize(16) : this.nowSize(18),
                      color: '#1DD9EC',
                      fontWeight: '400',
                      fontFamily: 'Arial-Regular, Arial'
                    },
                    b: {
                      fontSize: clientWidths < 1440 ? this.nowSize(14) : clientWidths < 1680 ? this.nowSize(16) : this.nowSize(18),
                      // color: "#6947FF",
                      color: '#1DD9EC',
                      fontWeight: '400',
                      fontFamily: 'Arial-Regular, Arial'
                    }
                  },
                  fontSize:  clientWidths < 1440 ? this.nowSize(14) : clientWidths < 1680 ? this.nowSize(16) : this.nowSize(18),
                  color: '#1DD9EC'
                }
              }
            },
            z: 10,
            zlevel: 0,
            data: yAxisData
          },
          {
            type: 'pictorialBar', // 设置类型为象形柱状图
            symbol: 'rect', // 图形类型，带圆角的矩形
            symbolMargin: '3', // 图形垂直间隔
            // symbolRepeat: true, // 图形是否重复
            // 分隔
            itemStyle: {
              normal: {
                color: '#02044D'
              }
            },
            symbolRepeat: 'fixed',
            symbolClip: true,
            symbolSize: ['100%', 4],
            symbolPosition: 'start',
            symbolOffset: [0, 0],
            // symbolBoundingData: this.total,
            width: '100%',
            z: 0,
            zlevel: 2,
            data: yAxisData
          }
        ]
      }
      this.myChartBarOne.setOption(option, true)
    },
    getBarTwo() {
      this.myChartBarTwo = this.$echarts.init(document.getElementById('barTwo'))
      var colors = [
        {
          one: '#FAC840',
          two: '#FA5563'
        }
      ]
      var xAxisData = this.echartDataTwo.meal_type.map((v) => v.meal_name)
      var yAxisData = this.echartDataTwo.meal_type.map((v) => v.count)
      var clientWidth = document.documentElement.clientWidth
      var option = {
        grid: {
          left: '0',
          right: '0',
          bottom: this.nowSize(50)
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLine: {
            // 轴线
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            }
          },
          axisLabel: {
            color: 'rgba(255,255,255,0.8)',
            fontSize: clientWidth < 1440 ? this.nowSize(12) : clientWidth < 1680 ? this.nowSize(12) : this.nowSize(14),
            interval: 0,
            margin: 15 // 柱状图的x轴上的标签文字距离x轴的距离
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          // name: '单位：次',
          nameTextStyle: {
            color: '#268C8C',
            fontSize: this.nowSize(12),
            padding: [0, 0, 10, -30] // name文字位置 对应 上右下左
          },
          show: false,
          type: 'value',
          max: this.max,
          // y轴线
          axisLine: {
            show: false
          },
          // 轴文字
          axisLabel: {
            color: '#268C8C',
            fontSize: this.nowSize(12)
          },

          // 网格线
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed', // dotted：虚线 solid:实线
              width: 1,
              color: '#268C8C'
            }
          }
        },
        series: [
          {
            name: '高中部',
            type: 'bar', // 设置类型为象形柱状图
            barWidth: '56%', // 柱图宽度
            barMaxWidth: 54, // 每一个都要设置
            barMinWidth: 10, // 每一个都要设置
            itemStyle: {
              normal: {
                color: function (params) {
                  // var odd = params.dataIndex % 2
                  return {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: colors[0].one // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: colors[0].two // 100% 处的颜色
                      }
                    ]
                  }
                },

                // color:'#39C9F6',
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (params) {
                    // 设置柱状图上文本的颜色不同
                    // 索引);
                    if (params.dataIndex % 2 === 0) {
                      return `{a|${yAxisData[params.dataIndex]}}笔`
                    } else {
                      return `{b|${yAxisData[params.dataIndex]}}笔`
                    }
                  },
                  rich: {
                    a: {
                      fontSize: clientWidth < 1440 ? this.nowSize(14) : clientWidth < 1680 ? this.nowSize(16) : this.nowSize(18),
                      color: '#FAC540'
                    },
                    b: {
                      fontSize: clientWidth < 1440 ? this.nowSize(14) : clientWidth < 1680 ? this.nowSize(16) : this.nowSize(18),
                      // color: "#6947FF",
                      color: '#FAC540 '
                    }
                  },
                  fontSize: clientWidth < 1440 ? this.nowSize(14) : clientWidth < 1680 ? this.nowSize(16) : this.nowSize(18),
                  color: '#FAC540 '
                }
              }
            },
            z: 10,
            zlevel: 0,
            data: yAxisData
          },
          {
            type: 'pictorialBar', // 设置类型为象形柱状图
            symbol: 'rect', // 图形类型，带圆角的矩形
            symbolMargin: '3', // 图形垂直间隔
            // symbolRepeat: true, // 图形是否重复
            // 分隔
            itemStyle: {
              normal: {
                color: '#02044D'
              }
            },
            symbolRepeat: 'fixed',
            symbolClip: true,
            symbolSize: ['100%', 4],
            symbolPosition: 'start',
            symbolOffset: [0, 0],
            // symbolBoundingData: this.total,
            width: '100%',
            z: 0,
            zlevel: 2,
            data: yAxisData
          }
        ]
      }
      this.myChartBarTwo.setOption(option, true)
    },
    // getBrushFace() {
    //   var cardData = []
    //   var faceData = []
    //   var otherData = []
    //   var timeData = []
    //   this.baseInfo.bill.payType.forEach(item => {
    //     cardData.push(item.card_rate)
    //     faceData.push(item.face_rate)
    //     otherData.push(item.other_rate)
    //     timeData.push(item.hour.slice(item.hour.length - 2) + ':00')
    //   })
    //   this.myChartFaceBar = this.$echarts.init(document.getElementById('chartFaceBar'))
    //   var optionbarline = {
    //     // legend: {
    //     //   data: ['新增', '修改', '删除'],
    //     //   x: 'right',
    //     //   // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
    //     //   y: 'top',
    //     //   textStyle: {
    //     //     color: '#666' // 图例文字颜色
    //     //   }
    //     // },
    //     grid: {
    //       top: '40px',
    //       left: '24px',
    //       right: '0',
    //       bottom: '50px'
    //     },
    //     tooltip: {
    //       trigger: 'axis'
    //       // axisPointer: {
    //       //   type: 'cross',
    //       //   label: {
    //       //     backgroundColor: '#6a7985'
    //       //   }
    //       // }
    //     },
    //     xAxis: {
    //       type: 'category',
    //       boundaryGap: false,
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: 'rgba(255, 255, 255, 0.3)'
    //         }
    //       },
    //       axisLabel: {
    //         color: 'rgba(255,255,255,0.8)',
    //         fontSize: 12,
    //         // interval: 'auto'
    //         interval: 1
    //       },
    //       axisTick: {
    //         show: false,
    //         alignWithLabel: true
    //       },
    //       splitLine: {
    //         show: true,
    //         // interval: 'auto'
    //         interval: 0,
    //         lineStyle: {
    //           color: 'rgba(40, 81, 167, 0.41)'
    //         }
    //       },
    //       data: timeData
    //     },
    //     yAxis: {
    //       type: 'value',
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: 'rgba(255, 255, 255, 0.3)'
    //         }
    //       },
    //       axisLabel: {
    //         color: 'rgba(255,255,255,0.8)',
    //         fontSize: 12,
    //         // interval: 'auto'
    //         interval: 1
    //       },
    //       show: true,
    //       splitLine: {
    //         show: false,
    //         lineStyle: {
    //           color: 'rgba(40, 81, 167, 0.41)'
    //         }
    //       }
    //     },
    //     series: [{
    //       name: '刷脸',
    //       data: faceData,
    //       type: 'line',
    //       itemStyle: {
    //         normal: {
    //           lineStyle: {
    //             width: 3, // 折线宽度
    //             color: '#1EDCEC'
    //           }
    //         }
    //       },
    //       smooth: true,
    //       symbol: 'none'
    //     },
    //     {
    //       name: '刷卡',
    //       data: cardData,
    //       type: 'line',
    //       itemStyle: {
    //         normal: {
    //           lineStyle: {
    //             width: 3, // 折线宽度
    //             color: '#F99951'
    //           }
    //         }
    //       },
    //       smooth: true,
    //       symbol: 'none'
    //     }
    //       // {
    //       //   name: '未取',
    //       //   data: otherData,
    //       //   type: 'line',
    //       //   itemStyle: {
    //       //     normal: {
    //       //       lineStyle: {
    //       //         width: 3, // 折线宽度
    //       //         color: '#FA5963'
    //       //       }
    //       //     }
    //       //   },
    //       //   smooth: true,
    //       //   symbol: 'none'
    //       // }
    //     ],
    //     // color: ['#1EDCEC', '#F99951', '#FA5963']
    //     color: ['#1EDCEC', '#F99951']
    //   }
    //   this.myChartFaceBar.setOption(optionbarline, true)
    // }
    getBrushFace() {
      var cardData = []
      var faceData = []
      var timeData = []
      this.baseInfo.bill.payType.forEach((item, index) => {
        cardData.push(item.card_count)
        faceData.push(item.face_count)
        if ((index % 2) !== 1) {
          timeData.push(Number(item.hour) < 10 ? '0' + item.hour + ':00' : item.hour + ':00')
        } else {
          timeData.push('')
        }
      })
      this.myChartFaceBar = this.$echarts.init(document.getElementById('chartFaceBar'))
      var optionbarline = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: this.nowSize(70),
          left: this.nowSize(30),
          right: this.nowSize(10),
          bottom: this.nowSize(50)
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#355b68'
              },
              show: true
            },
            axisLabel: {
              color: 'rgba(255,255,255,1)',
              fontSize: this.nowSize(14),
              interval: 0
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#00314a',
                width: 1
              }
            },
            axisTick: {
              show: true,
              inside: true,
              alignWithLabel: true,
              // align: 'center',
              lineStyle: {
                color: '#00314a',
                width: 1,
                type: 'solid'
              }
            },

            data: timeData
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '百分比',
            name: '单位:笔',
            nameTextStyle: {
              color: 'rgba(255,255,255,1)',
              fontSize: this.nowSize(12),
              padding: [0, 0, 0, -15]
            },
            axisLine: {
              lineStyle: {
                color: '#355b68'
              },
              show: true
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(40, 81, 167, 0.41)'
              }
            },
            axisLabel: {
              color: 'rgba(255,255,255,1)',
              fontSize: this.nowSize(12),
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '刷脸',
            type: 'bar',
            data: faceData,
            barWidth: '30%',
            barGap: '0', // 柱图间距
            itemStyle: {
              color: function (params) {
                // var odd = params.dataIndex % 2
                return {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#1EDBEC' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#087EFC' // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          },
          {
            name: '刷卡',
            type: 'bar',
            data: cardData,
            barWidth: '30%',
            barGap: '0',
            itemStyle: {
              color: function (params) {
                // var odd = params.dataIndex % 2
                return {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FAC840' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#FA5563' // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          }
        ]
      }
      this.myChartFaceBar.setOption(optionbarline, true)
    }
  }
}
</script>
<style lang="less" scoped></style>
